import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Image,
  Switch,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

// 课程数据类型定义
interface Course {
  id: string;
  title: string;
  instructor: string;
  level: string;
  price: number;
  studentsCount: number;
  isFree?: boolean;
  isNew?: boolean;
  image: string;
  category?: string;
}

const CourseListSreen = () => {
  const navigation = useNavigation();

  // 筛选状态
  const [selectedCategory, setSelectedCategory] = useState<string>('Vuejs');
  const [selectedDifficulty, setSelectedDifficulty] = useState<string>('全部');
  const [selectedCourseType, setSelectedCourseType] =
    useState<string>('全部课程');
  const [sortBy, setSortBy] = useState<'latest' | 'hottest'>('latest');
  const [showOnlyUnlearned, setShowOnlyUnlearned] = useState<boolean>(false);

  // 模拟课程数据
  const [courses, setCourses] = useState<Course[]>([
    {
      id: '1',
      title: 'Electron+Vue3+AI+云存储--实战跨平台桌面应用',
      instructor: '西一凹',
      level: '初阶',
      price: 299,
      studentsCount: 116,
      image:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/1ef1a964eaf64c4ab27501b43d5b1590course1.png',
      category: 'Vuejs',
    },
    {
      id: '2',
      title: '小产品独立变现实战',
      instructor: '凯凯刘',
      level: '初阶',
      price: 899,
      studentsCount: 42,
      isNew: true,
      image:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/1ef1a964eaf64c4ab27501b43d5b1590course1.png',
      category: 'Vuejs',
    },
    {
      id: '3',
      title: '从0到1全流程落地web游戏大地图项目，成为WebGIS专家',
      instructor: 'Meo',
      level: '进阶',
      price: 199,
      studentsCount: 133,
      image:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/1ef1a964eaf64c4ab27501b43d5b1590course1.png',
      category: 'Vuejs',
    },
    {
      id: '4',
      title: 'AI时代下，前端工程师的生存与发展策略',
      instructor: 'Brian',
      level: '零基础',
      price: 0,
      studentsCount: 1322,
      isFree: true,
      image:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/1ef1a964eaf64c4ab27501b43d5b1590course1.png',
      category: 'Vuejs',
    },
    {
      id: '5',
      title: '前端全栈进阶 Nextjs打造跨框架SaaS应用',
      instructor: 'Jokcy',
      level: '高阶',
      price: 299,
      studentsCount: 233,
      image:
        'https://2403a.oss-cn-beijing.aliyuncs.com/2025/03/26/1ef1a964eaf64c4ab27501b43d5b1590course1.png',
      category: 'Vuejs',
    },
  ]);

  // 处理课程点击事件
  const handleCoursePress = (courseId: string) => {
    navigation.navigate('Details', { id: courseId });
  };

 

  // 处理排序
  const handleSortPress = (sort: 'latest' | 'hottest') => {
    setSortBy(sort);
    // 这里可以添加实际的排序逻辑
    // 模拟排序操作
    const sortedCourses = [...courses].sort((a, b) => {
      if (sort === 'latest') {
        // 按ID降序（模拟最新）
        return parseInt(b.id) - parseInt(a.id);
      } else {
        // 按学习人数降序（模拟最热）
        return b.studentsCount - a.studentsCount;
      }
    });
    setCourses(sortedCourses);
  };

  // 处理未学筛选开关
  const handleUnlearnedToggle = (value: boolean) => {
    setShowOnlyUnlearned(value);
    // 这里可以添加实际的筛选逻辑
  };

  return (
    <View style={styles.container}>
      {/* 排序和筛选开关区域 */}
      <View style={styles.sortContainer}>
        <View style={styles.sortButtonsContainer}>
          <TouchableOpacity
            style={[
              styles.sortButton,
              sortBy === 'latest' && styles.activeSortButton,
            ]}
            onPress={() => handleSortPress('latest')}
          >
            <Text
              style={[
                styles.sortButtonText,
                sortBy === 'latest' && styles.activeSortButtonText,
              ]}
            >
              最新
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.sortButton,
              sortBy === 'hottest' && styles.activeSortButton,
            ]}
            onPress={() => handleSortPress('hottest')}
          >
            <Text
              style={[
                styles.sortButtonText,
                sortBy === 'hottest' && styles.activeSortButtonText,
              ]}
            >
              最热
            </Text>
          </TouchableOpacity>
        </View>

        <View style={styles.unlearnedContainer}>
          <Text style={styles.unlearnedText}>仅显示未学</Text>
          <Switch
            value={showOnlyUnlearned}
            onValueChange={handleUnlearnedToggle}
            trackColor={{ false: '#e0e0e0', true: '#3498db' }}
            thumbColor="#ffffff"
          />
        </View>
      </View>

      {/* 课程列表 */}
      <ScrollView
        style={styles.coursesScrollView}
        showsVerticalScrollIndicator={false}
      >
        {courses.map(course => (
          <TouchableOpacity
            key={course.id}
            style={styles.courseItem}
            onPress={() => handleCoursePress(course.id)}
            activeOpacity={0.7}
          >
            <View style={styles.courseImageContainer}>
              {course.isNew && (
                <View style={styles.newTag}>
                  <Text style={styles.newTagText}>引入</Text>
                </View>
              )}
              <Image
                source={{ uri: course.image }}
                style={styles.courseImage}
                resizeMode="cover"
              />
            </View>
            <View style={styles.courseInfo}>
              <Text style={styles.courseTitle} numberOfLines={2}>
                {course.title}
              </Text>
              <View style={styles.instructorContainer}>
                <Text style={styles.instructorName}>{course.instructor}</Text>
                <Text style={styles.instructorLevel}>{course.level}</Text>
              </View>
              <View style={styles.priceContainer}>
                <Text
                  style={course.isFree ? styles.freeText : styles.priceText}
                >
                  {course.isFree ? '免费课' : `¥${course.price}`}
                </Text>
                <Text style={styles.studentsCount}>
                  {course.studentsCount}人学习
                </Text>
              </View>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  filtersContainer: {
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
    paddingVertical: 10,
  },
  filtersScrollView: {
    paddingHorizontal: 10,
  },
  filterButton: {
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 20,
    marginRight: 10,
    backgroundColor: '#f0f0f0',
  },
  activeFilterButton: {
    backgroundColor: '#3498db',
  },
  filterButtonText: {
    color: '#666666',
    fontSize: 14,
  },
  activeFilterButtonText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
  sortContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#ffffff',
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginBottom: 10,
  },
  sortButtonsContainer: {
    flexDirection: 'row',
  },
  sortButton: {
    paddingHorizontal: 15,
    paddingVertical: 5,
    borderRadius: 20,
    marginRight: 10,
    backgroundColor: '#f0f0f0',
  },
  activeSortButton: {
    backgroundColor: '#e74c3c',
  },
  sortButtonText: {
    color: '#666666',
    fontSize: 14,
  },
  activeSortButtonText: {
    color: '#ffffff',
    fontWeight: 'bold',
  },
  unlearnedContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  unlearnedText: {
    color: '#666666',
    fontSize: 14,
    marginRight: 10,
  },
  coursesScrollView: {
    flex: 1,
    paddingHorizontal: 10,
  },
  courseItem: {
    flexDirection: 'row',
    backgroundColor: '#ffffff',
    borderRadius: 8,
    marginBottom: 10,
    padding: 10,
  },
  courseImageContainer: {
    width: 120,
    height: 160,
    borderRadius: 8,
    overflow: 'hidden',
    position: 'relative',
  },
  newTag: {
    position: 'absolute',
    top: 0,
    left: 0,
    backgroundColor: '#e74c3c',
    paddingHorizontal: 8,
    paddingVertical: 2,
    zIndex: 10,
  },
  newTagText: {
    color: '#ffffff',
    fontSize: 12,
    fontWeight: 'bold',
  },
  courseImage: {
    width: '100%',
    height: '100%',
  },
  courseInfo: {
    flex: 1,
    marginLeft: 15,
    justifyContent: 'space-between',
  },
  courseTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333333',
    lineHeight: 22,
  },
  instructorContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  instructorName: {
    fontSize: 14,
    color: '#666666',
  },
  instructorLevel: {
    fontSize: 14,
    color: '#666666',
    marginLeft: 10,
  },
  priceContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  priceText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#e74c3c',
  },
  freeText: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#2ecc71',
    backgroundColor: '#ecf0f1',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
  },
  studentsCount: {
    fontSize: 14,
    color: '#666666',
  },
});

export default CourseListSreen;
